<div *ngIf="demand">
    <nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzWidth]="820" [nzContent]="modalContent" [nzFooter]="modalFooter"
        (nzOnCancel)="handleCancel()">
        <ng-template #modalTitle>
            {{demand.categoryName}} 订单详情
        </ng-template>
        <ng-template #modalContent>
            <!-- wait process finish error -->
            <!-- <nz-steps [nzCurrent]="1" nzStatus="process">
                <nz-step nzTitle="支付" nzDescription="2018-04-08 13:58:40"></nz-step>
                <nz-step nzTitle="处理" nzDescription="2018-04-08 13:58:46"></nz-step>
                <nz-step nzTitle="完成" nzDescription="2018-04-08 13:58:51"></nz-step>
            </nz-steps> -->
            <div nz-row [nzGutter]="'24'">
                <div nz-col nzSpan="12">
                    <nz-list nzBordered [nzHeader]="Header" [nzFooter]="Footer">
                        <nz-list-item>提交人:{{demand.publisherName}}</nz-list-item>
                        <nz-list-item>状态:{{demand.status}}</nz-list-item>
                    </nz-list>
                    <nz-list nzBordered style="margin-top: 8px;">
                        <nz-list-item>{{demand.remarks}}</nz-list-item>
                    </nz-list>
                </div>
                <div nz-col nzSpan="12">
                    <form nz-form [formGroup]="validateForm">
                        <nz-form-item>
                            <nz-form-control>
                                <nz-input-group nzAddOnBefore="报价:" nzAddOnAfter="(狗粮)">
                                    <input formControlName="amount" type="number" nz-input placeholder="您的报价">
                                </nz-input-group>
                                <nz-form-explain *ngIf="validateForm.get('amount').dirty && validateForm.get('amount').errors">请输入您的示价,最少5狗粮!</nz-form-explain>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-control>
                                <nz-input-group nzAddOnBefore="时长:" nzAddOnAfter="(分钟)">
                                    <input formControlName="minute" nz-input type="number" placeholder="预计处理时长" />
                                </nz-input-group>
                                <nz-form-explain *ngIf="validateForm.get('minute').dirty && validateForm.get('minute').errors">请输入您的预计处理时长</nz-form-explain>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-control>
                                <input nzType="textarea" formControlName="explain" nz-input placeholder="您的对客户的留言">
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-control>
                                <button class="ant-btn__block" nz-button nzType="primary" (click)="handleOk()" [disabled]="!validateForm.valid && !isDisabled" [nzLoading]="isConfirmLoading">抢单</button>
                            </nz-form-control>
                        </nz-form-item>
                        <!-- <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
                                <button nz-button nzType="primary" (click)="handleOk()" [disabled]="!validateForm.valid" [nzLoading]="isConfirmLoading">抢单</button> -->
                    </form>
                </div>
            </div>
        </ng-template>
        <ng-template #Header>
            <span>车辆信息:{{demand.title}}</span>
        </ng-template>
        <ng-template #Footer>
            <span *ngIf="demand && demand.attachments">
                文件材料:
                <a *ngFor="let attachment of demand.attachments" [href]="attachment.url" [target]="_blank">
                    &nbsp;
                    <i *ngIf="attachment.suffix === '.bin' || attachment.suffix === '.yhs'" class="anticon anticon-file"></i>
                    <i *ngIf="attachment.suffix === '.jpg' || attachment.suffix === '.png'" class="anticon anticon-picture"></i>
                    {{attachment.suffix}} &nbsp;
                </a>
            </span>
        </ng-template>
        <ng-template #modalFooter>
            需求提交时间:{{demand.created | date:'yyyy-MM-dd HH:mm:ss'}}
        </ng-template>
    </nz-modal>
</div>